<template>
    <main class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-8">
        <div class="p-6 md:order-1 hidden md:block relative bg-gray-100 rounded-lg">
            <!-- <img
          class="rounded-full transition-transform transform hover:scale-125"
          src="/hero.png"
          alt="Starship starts the engine"
          loading="eager"
          format="avif"
          width="512"
          height="512"
        /> -->
            <div class="dot1"></div>
            <div class="dot2"></div>

            <video autoplay loop playsinline muted
                poster="https://qhstaticssl.kujiale.com/image/jpeg/1715313041972/F559D2E3C1E5BA95C7054468BCF5BF95.jpg">
                <source
                    src="https://qhstaticva-cos.kujiale.com/media/yun/help/video/UID_85605cc6_69c0_4510_1715243666965.mp4"
                    type="video/mp4" />
                <track kind="captions" src />
                抱歉，您的浏览器不支持嵌入视频！
            </video>
        </div>

        <div>
            <h1 class="text-5xl font-bold lg:tracking-tight">
                AI创意商拍
            </h1>
            <p class="text-lg mt-4 text-slate-600 max-w-xl">
                AI抠图换背景，效果超真实
            </p>
            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <landing-link icon="camera">免费使用</landing-link>
            </div>
            <div class="text-gray-500 text-sm my-4">没有图片?试试下面这些</div>
            <div class="flex">
                <div class="w-12 h-12 mr-2 bg-gray-200 hover:bg-white rounded cursor-pointer" v-for="(item, index) in samples"
                    :key="index">
                    <img class="" :src="item.image" />
                </div>

            </div>
        </div>
    </main>
</template>
<script setup lang="ts">
const samples = ref([{
    image: "https://qhstaticssl.kujiale.com/image/png/1715758468991/E4FA06F0DA1DA30FC2812E361EB9B1A5.png",
    link: ""
}, {
    image: "https://qhstaticssl.kujiale.com/image/png/1715758469255/19DFBAE8C0CA093577BC4261C99DFCD2.png",
    link: ""
}, {
    image: "https://qhstaticssl.kujiale.com/image/png/1715758469479/348ED5C1F9627AB990C76FD29ABF77E3.png",
    link: ""
}, {
    image: "https://qhstaticssl.kujiale.com/image/png/1715758469723/A6CFAF7A124C173FBF16045DAB38FCF5.png",
    link: ""
}])
</script>
<style scoped>
video {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.dot1 {
    position: absolute;
    right: 48px;
    bottom: -86px;
    z-index: 0;
    width: 180px;
    height: 180px;
    background-image: url(https://qhstaticssl.kujiale.com/image/png/1715759899868/61109CF486B5E6E7060855E0C1B8ABA3.png?x-oss-process=image/format,webp);
    background-position: center;
    background-size: cover;
}

.dot2 {
    position: absolute;
    top: 186px;
    left: -145px;
    z-index: 0;
    width: 180px;
    height: 180px;
    background-image: url(https://qhstaticssl.kujiale.com/image/png/1715759899629/F105CC99D162DBF067ABC3D1DA246B2F.png?x-oss-process=image/format,webp);
    background-position: center;
    background-size: cover;
}


</style>